<template>
	<view class="wanlfind-add-container">
		<view class="edgeInsetTop"></view>
		<view class="wanlfind-add-container__main">
			<!-- 发布种草 -->
			<view v-if="params.type === 'want'" class="want">
				<view class=" bg-white modulebox">
					<view class="padding-bj flex justify-between align-center">
						<view class="text-30">上传图片</view>
					</view>
					<view class="grid col-4 grid-square flex-sub padding-lr-bj">
						<view v-if="params.images.length > 0" v-for="(item, index) in params.images" :key="index">
							<view class="item" @tap="handlePreview(index)">
								<image :src="$wanlshop.oss(item, 100, 100)" mode="widthFix"></image>
							</view>
							<view class="tag" @tap="handleDelImage(index)">
								<text class="wlIcon-31guanbi text-white"></text>
							</view>
						</view>
						<view v-if="params.images.length < 9" @tap="handleImage()">
							<view class="item">
								<view class="text-lg text-gray">
									<text class="wlIcon-tianjia"></text>
									<view v-if="params.images.length === 0" class="margin-top-xs text-sm">添加图片</view>
									<view v-else class="margin-top-xs text-sm">继续添加</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 种草内容 -->
				<view class="padding-bj flex justify-between align-center">
					<view class="text-30">
						<text class="wlIcon-xiugaioryijian margin-right-xs text-bold"></text>
						种草内容
					</view>
				</view>
				<view class="padding-bj bg-gray margin-lr-bj radius-bock">
					<editor id="editor" @ready="onEditorReady" @input="onEditorInput" placeholder="编辑种草文案~" />
				</view>
			</view>
			<!-- 发布视频 -->
			<view v-if="params.type === 'video'" class="video">
				<view class="padding-bj flex">
					<view class="upload margin-right-bj flex align-center justify-center radius-bock bg-gray">
						<view v-if="video.tempFilePath" @tap="handleVideo">
							<!-- #ifdef APP-PLUS -->
							<video class="radius-bock" :controls="false" :show-center-play-btn="false"
								:src="video.tempFilePath" object-fit="fill" autoplay muted />
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<video class="radius-bock" :controls="false" :show-center-play-btn="false"
								:src="video.tempFilePath" object-fit="cover" />
							<!-- #endif -->
						</view>
						<block v-else>
							<view v-if="video.progress === 0 && video.progress !== 100"
								class="text-lg text-gray text-center" @tap="handleVideo">
								<text class="wlIcon-tianjia"></text>
								<view class="margin-top-xs text-sm">添加视频</view>
							</view>
						</block>
						<view v-if="video.progress > 0 && video.progress !== 100"
							class="loading flex align-center justify-center">
							<view class="text-xxl text-gray text-center">
								<text class="wlIcon-jiazai wlIconfont-spin"></text>
								<view class="margin-top-xs text-min">
									{{$wanlshop.conver(video.totalBytesSent, false)}}/{{$wanlshop.conver(video.totalBytesExpectedToSend)}}
								</view>
							</view>
						</view>
					</view>
					<editor id="editor" @ready="onEditorReady" @input="onEditorInput"
						placeholder="给视频添加标题，提升曝光率获取更多赞赏~" />
				</view>
			</view>
			<!-- 选择商品 -->
			<view class=" bg-white modulebox">
			<view class="padding-bj flex justify-between align-center" @tap="showType=true">
				<view class="">
					
					类目选择
				</view>
				<view class="">
					{{typeList&&typeList[params.type_id_index]&&typeList[params.type_id_index].name}}<text
						class="wlIcon-fanhui2">

					</text></view>
			</view>
			</view>
			<view class=" bg-white modulebox">


				<view class="padding-bj  flex justify-between align-center" @tap="handleGoods()">
					<view class="flex align-center">
						<image src="/static/new/addGoods.png" style="width: 33rpx;" mode="widthFix"></image>

						选择商品
					</view>
					<view class=""><text class="wlIcon-fanhui2"></text></view>
				</view>
				<view class="grid col-4 grid-square solid-top flex-sub padding-lr-bj" style="padding-top: 25rpx;">
					<view v-if="chooseList.length === 0" @tap="handleGoods()">
						<view class="item">
							<image src="/static/new/goods.png" mode="widthFix"></image>

							<!-- 	<view class="text-lg text-gray">
								<text class="wlIcon-tianjia"></text>
								<view class="margin-top-xs text-sm">添加商品</view>
							</view> -->
						</view>
					</view>
					<view v-if="chooseList.length > 0" v-for="(item, index) in chooseList" :key="index"
						@tap="handleGoods()">
						<view class="item">
							<image :src="$wanlshop.oss(item.image, 100, 100)" mode="widthFix"></image>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 底部 -->
		<view class="safeAreaBottom"></view>
		<view class="wanlfind-add-container__foot">
			<view class="cu-bar tabbar foot flex flex-direction">
				<button class="cu-btn bg-red lg" @tap="handleSubmit">
					<text class="wlIcon-fabu margin-right-sm"></text>
					发布{{ params.type === 'want' ? '种草' : '短视频' }}
				</button>
			</view>
		</view>
		<!-- 模态框 -->
		<view class="wanlfind-add-container__modal">
			<view class="cu-modal bottom-modal" :class="modalName == 'goods' ? 'show' : ''" @tap="handleHideModal">
				<view class="cu-dialog bg-bgcolor" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content">
								<view class="text-lg">选择商品</view>
								<!-- 								<view class="text-lg">购买过的商品</view> -->
							</view>
							<view class="close wlIcon-31guanbi" @tap="handleHideModal"></view>
						</view>
						<view class="search-form round"
							style="display: flex;align-items: center;padding: 20rpx;margin: 20rpx;">
							<text class="wlIcon-sousuo1 text-bold" style="margin-right: 20rpx;"></text>
							<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
								:placeholder="searchKeywords ? searchKeywords : `搜索商品`" @input="onSearchInputChanged"
								focus style="text-align: left;" v-model="searchKeywords" />
						</view>
						<scroll-view class="scroll-y" scroll-y @scrolltoupper="handleUpper">

							<wanl-empty v-if="orderList.length === 0 && status !== 'loading'" text="还没有任何商品" />
							<view v-if="orderList.length > 0">
								<view class="item bg-white padding-bj margin-bottom-bj radius-bock"
									v-for="(item, index) in orderList" :key="index" @tap="handleChoose(index)">
									<image class="radius margin-right-bj" :src="$wanlshop.oss(item.image, 100, 100)"
										mode="aspectFill"></image>
									<view class="details margin-right-bj">
										<view class="text-cut-2 text-sm">
											<text>{{ item.title }}</text>
										</view>
										<view class="text-orange">
											<text class="text-price">{{ item.price }}</text>
										</view>
									</view>
									<view class="flex align-center text-xxl">
										<text v-if="item.choose" class="wlIcon-xuanze-danxuan text-red" />
										<text v-else class="wlIcon-xuanze text-gray" />
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :content-text="contentText" />
						</scroll-view>
						<view class="foot padding-lr-bj">
							<button class="cu-btn bg-red text-bold complete" @tap="handleHideModal">
								完成
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-picker :show="showType" :columns="[typeList]" keyName="name" @confirm="selectType"
			@cancel="showType=false"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showType: false,
				modalName: null,
				orderList: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中...',
					contentnomore: ''
				},
				chooseList: [],
				video: {
					tempFilePath: null, // 本地缓存
					progress: 0, //上传进度
					totalBytesSent: 0, //已经上传的数据长度
					totalBytesExpectedToSend: 0, //预期需要上传的数据总长度
				},
				params: {
					type: null,
					content: '',
					goods_ids: [],
					video_id: null,
					type_id: '',
					type_id_index: "",
					images: []
				},
				searchKeywords: "",
				typeList: [],
			};
		},
		onLoad(option) {
			this.params.type = option.type;
			this.getTypeList()
		},
		methods: {
			selectType(item) {
				const value = item.value[0]
				this.params.type_id = value.id
				this.params.type_id_index = item.indexs[0]
				console.log(this.params)
				this.showType = false
			},
			async getTypeList() {
				await uni.request({
					url: "/index/typeList",
					complete: (res) => {
						this.typeList = res.data
					}
				})
			},
			onSearchInputChanged(event) {
				let value = event.detail.value;
				if (!value) {
					// uni.showModal({
					// 	title: '提示',
					// 	content: '请输入内容。'
					// });
					return;
				}
				this.orderList = [];
				this.current_page = 1;
				this.handleGoods()
			},
			async loadSearch(val) {
				if (!val) return;
				await uni.request({
					url: '/wanlshop/common/search',
					data: {
						search: val
					},
					success: res => {
						this.search = res.data;
						if (res.data.categoryList.length != 0 || res.data.searchList.length != 0) {}
					}
				});
			},
			// 发布
			async handleSubmit() {
				const params = this.params;
				if (params.type === 'video') {
					const video = this.video;
					// 判断视频是否上传完成
					if (video.tempFilePath === null || params.video_id === null) {
						this.$wanlshop.msg('请上传视频');
						return;
					} else {
						if (video.progress === 0) {
							this.$wanlshop.msg('异常请重开此页面');
							return;
						}
						if (video.progress < 100 || video.totalBytesSent !== video.totalBytesExpectedToSend) {
							this.$wanlshop.msg('视频还没有上传完成哦~');
							return;
						}
					}
					if (!params.content) {
						this.$wanlshop.msg('请编辑视频标题~');
						return;
					}
				} else if (params.type === 'want') {
					if (params.images.length === 0) {
						this.$wanlshop.msg('至少添加一张图片');
						return;
					}
					if (!params.content) {
						this.$wanlshop.msg('请编辑种草详情~');
						return;
					}
				}
				if (params.goods_ids.length === 0) {
					this.$wanlshop.msg('至少选择一个商品');
					this.handleGoods();
					return;
				}
				await uni.request({
					url: '/wanlshop/find/find/addData',
					method: 'POST',
					data: params,
					success: res => {
						this.$wanlshop.msg('发布成功！');
						this.$wanlshop.to('/pages/page/success?type=find');
					}
				});
			},
			// 选择视频
			handleVideo(e) {
				uni.chooseVideo({
					success: ch => {
						let name = ch.name ? ch.name : `${this.$wanlshop.guid(12)}.mp4`;
						uni.request({
							url: '/wanlshop/video/getUploadProof',
							data: {
								name: name,
							},
							success: sts => {
								const uploadTask = uni.uploadFile({
									url: sts.data.ossUrl,
									filePath: ch.tempFilePath,
									name: sts.data.file,
									formData: sts.data.formData,
									success: upload => {
										if (upload.statusCode === 200) {
											this.params.video_id = sts.data.videoId;
											this.video.tempFilePath = ch.tempFilePath;
										} else {
											this.params.video_id = null;
											this.video.tempFilePath = null;
											this.$wanlshop.msg('视频点播接口异常');
										}
									},
									fail: (res) => {
										console.info(res);
									}
								});
								uploadTask.onProgressUpdate((res) => {
									this.video.progress = res.progress;
									this.video.totalBytesSent = res.totalBytesSent;
									this.video.totalBytesExpectedToSend = res
										.totalBytesExpectedToSend;
								});
							}
						});
					}
				});
			},
			handleImage() {
				uni.chooseImage({
					crop: {
						quality: 60
					},
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: data => {
													this.params.images
														.push(JSON.parse(
																data.data)
															.data.url);
												},
												fail: error => {
													uni.showToast({
														title: JSON
															.parse(
																error
																.data
															)
															.msg,
														icon: 'error',
														position: true
													});
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			handlePreview(index) {
				let imgArr = [];
				for (let item of this.params.images) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			handleDelImage(index) {
				this.params.images.splice(index, 1);
			},
			handleUpper() {
				if (this.last_page === this.current_page) {
					this.status = 'noMore';
				} else {
					this.status = 'loading';
					this.current_page++;
					this.handleGoods('upper');
				}
			},
			handleGoods(type) {
				this.modalName = 'goods';
				if (this.orderList.length > 0 && type !== 'upper') {
					return;
				}
				// uni.request({
				// 	url: '/wanlshop/order/getBuyList',
				// 	data: {
				// 		page: this.current_page
				// 	},
				// 	success: res => {
				// 		this.last_page = res.data.last_page; // 总页码
				// 		this.current_page = res.data.current_page; // 当前页面
				// 		if (res.data.last_page === res.data.current_page) {
				// 			this.status = 'noMore';
				// 		} else {
				// 			this.status = 'more';
				// 		}
				// 		if (res.data.total === 0) {
				// 			this.status = 'noMore';
				// 		}
				// 		this.orderList = type === 'upper' ? this.orderList.concat(res.data.data) : res.data.data;
				// 	}
				// });
				let param = {
					page: this.current_page,
					assign: 2,
					search: this.searchKeywords
				}
				if (!this.searchKeywords) {
					delete param.searchKeywords
				}
				uni.request({
					url: '/wanlshop/product/lists',
					data: param,
					success: res => {
						this.last_page = res.data.last_page; // 总页码
						this.current_page = res.data.current_page; // 当前页面
						if (res.data.last_page === res.data.current_page) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
						if (res.data.total === 0) {
							this.status = 'noMore';
						}
						this.orderList = type === 'upper' ? this.orderList.concat(res.data.data) : res.data
							.data;
					}
				});

			},
			handleHideModal() {
				this.modalName = null;
			},
			handleHideModalType() {
				this.modalNameType = null;
			},
			handleChoose(index) {
				if (this.chooseList.length >= 8) {
					this.$wanlshop.msg('最多选择 8 个商品');
				} else {
					let goods = this.orderList[index];
					if (!goods.choose) {
						this.$set(goods, 'choose', true);
					} else {
						goods.choose = false;
					}
					this.formatGoods();
				}
			},
			formatGoods() {
				var list = [];
				var ids = [];
				this.orderList.map(item => {
					if (item.choose) {
						list.push(item);
						ids.push(item.id);
					}
				});
				this.chooseList = list;
				this.params.goods_ids = ids;
			},
			onEditorInput(e) {
				this.params.content = e.detail.html;
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery()
					.select('#editor')
					.context(res => {
						this.editorCtx = res.context;
					})
					.exec();
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	.wanlfind-add-container {
		&__main {
			.video {
				.upload {
					position: relative;
					width: 220rpx;
					height: 300rpx;

					video {
						width: 220rpx;
						height: 300rpx;
					}

					.loading {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
					}
				}

				#editor {
					flex: 1;
					height: 240rpx;
					min-height: 100rpx;
				}
			}

			.grid {
				position: relative;

				.item {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					z-index: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					border-radius: 18rpx;
					overflow: hidden;
					background-color: #f0f0f0;
				}

				.tag {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					z-index: 3;
					width: 40rpx;
					height: 40rpx;
					border-radius: 5500rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					overflow: hidden;
					background-color: #e6162c;
				}
			}
		}

		&__foot {
			bottom: 50rpx;

			.tabbar {
				z-index: 10;
				background-color: transparent;
				bottom: 50rpx;

				.cu-btn {
					width: calc(100% - 100rpx);
					font-size: 32rpx;
					border-radius: 95rpx;
					height: 95rpx;
					color: #fff;
				}
			}
		}

		&__modal {
			.scroll-y {
				padding-bottom: 0;

				.item {
					display: flex;

					image {
						width: 120rpx;
						height: 120rpx;
						flex-shrink: 1;
					}

					.details {
						&>view {
							width: 100%;
						}

						flex: 1;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
					}
				}
			}
		}
	}

	.search-form {
		border: 3rpx solid #101010;
		background-color: #fff;
	}

	.modulebox {
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 10rpx;

		.text-30 {
			font-weight: bold;
			color: #010101;
			position: relative;
			padding-left: 10rpx;
		}

		.text-30::before {
			position: absolute;
			clear: both;
			content: '';
			width: 6rpx;
			height: 26rpx;
			background-color: #010101;
			top: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			border-radius: 4rpx;
		}
	}

	.ql-container {
		height: 197rpx;
		background: #F8F8F8;
		min-height: auto;
	}
</style>